<template>
  <div class="home">
    <div class="gender" ref="gender"></div>
    <div class="address" ref="address"></div>
  </div>
</template>

<script>
import { getOurList } from "@/api/admin";
export default {
  data() {
    return {};
  },
  async created() {
    let res = await getOurList();
    let list = res.data.data.list;
    let genderChartData = [
      { value: 0, name: "男" },
      { value: 0, name: "女" },
    ];
    let genderList = list.map((item) => item.gender);
    genderList.forEach((v) => {
      v == 1 ? genderChartData[0].value++ : genderChartData[1].value++;
    });
    let addressList = list
      .map((item) => item.address.split("/"))
      .flat(Infinity)
      .filter((v) => v.indexOf("市") != -1 && v != "市辖区");
    addressList = [...new Set(addressList)];
    let addressChartData = addressList.map((name) => {
      return { name, value: 0 };
    });
    addressChartData.forEach((i) => {
      list.forEach((j) => {
        if (j.address.indexOf(i.name) != -1) {
          i.value++;
        }
      });
    });
    let genderChart = echarts.init(this.$refs.gender);
    let addressChart = echarts.init(this.$refs.address);
    genderChart.setOption({
      title: {
        text: "性别分布",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "性别分布",
          type: "pie",
          radius: "50%",
          data: genderChartData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    });
    addressChart.setOption({
      title: {
        text: "地区分布",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "地区分布",
          type: "pie",
          radius: "50%",
          data: addressChartData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    });
  },
  methods: {},
};
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
}
.gender,
.address {
  flex: 1;
}
</style>